<template>
    <div class="playList_wrapper">
        <div class="container" @click.stop
             :style="{background:currentMusicCoverUrl?'url('+currentMusicCoverUrl+')':'#1F1D1D',backgroundSize:'cover'}">
            <div class="left">
                <div class="left_top">
                    <h4 class="left_top_title">播放列表</h4>
                    <div class="left_top_del">
                        <span @click.stop="deleteAll" class="glyphicon glyphicon-trash">清除</span>
                    </div>
                </div>
                <div ref="playList"
                     class="left_content">

                    <ul>
                        <div v-show="playList.length==0" style="text-align: center;padding-top: 10px;color: #8B8B8B;">
                            你还没有添加任何歌曲
                        </div>
                        <li @click="play(item)"
                            v-for="(item,index) in playList"
                            :class="{liActive:index==currentMusicIndex}">
                            <i v-show="index==currentMusicIndex"
                               class="glyphicon glyphicon-play"
                               style="color: #BD0B0B;"></i>
                            <p :class="['name',{space:index!=currentMusicIndex}]">{{item.name}}</p>
                            <router-link class="link" to="/">
                                <span class="iconfont icon-link"></span>
                            </router-link>
                            <p class="duration">{{formatTime(item.duration)}}</p>
                            <router-link class="artist" to="/ss" @click.native.stop>{{item.artist}}</router-link>
                            <div class="li_tools">
                                <a :href="currentMusicUrl" download="gdf"><span title="下载" class="iconfont icon-xiazia_gsjc"></span></a>
                                <span @click.stop="deleteOne(index)" title="移除"
                                      class="glyphicon glyphicon-trash"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right"></div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import musicApi from "../request/musicApi";
    import axios from 'axios'

    export default {
        name: "bottomPlayList",
        props: ['show'],
        data() {
            return {
                playIndex: '',
            }
        },
        methods: {
            play({id, name, picUrl, artist, mv}) {
                //由于系统限制，ios等不能在回调函数中使用play(),需要首先设置为静音，play（）再打开音量
                let store = this.$store;
                let player = document.getElementById('audioPlayer');
                player.muted = true;
                //获取url和detail(可以传多个id，取数组第一个值)
                axios.all([musicApi.getMusicUrl({id}), musicApi.getMusicDetail({ids: id})])
                    .then(axios.spread((url, detail) => {
                        if (url.data.code == 200 && detail.data.code == 200) {
                            if (!url.data.data[0].url) {
                                this.$alert('版权问题，暂时无法播放，请到官网购买', '提示', {
                                    confirmButtonText: '确定'
                                });
                                document.getElementById('audioPlayer').muted = false;
                                return;
                            }
                            store.commit('setCurrentSongId', id);
                            store.commit('setCurrentMusicName', name);
                            store.commit('setCurrentPlayTime', 0);
                            store.commit('setCurrentMusicUrl', url.data.data[0].url);
                            store.commit('setCurrentMusicDetail', detail.data.songs[0]);
                            store.commit('setCurrentMusicMv', mv);
                            store.commit('setCurrentMusicCoverUrl', picUrl);
                            store.commit('setCurrentMusicArtist', artist);
                            player.src = url.data.data[0].url;
                            player.play();
                            player.muted = false;
                        }
                    }));
            },
            deleteAll() {
                let store = this.$store;
                store.commit('removeAllFromPlayList');
                document.getElementById('audioPlayer').currentTime = 0;
                document.getElementById('audioPlayer').pause();
                store.commit('setCurrentSongId', '');
                store.commit('setCurrentMusicMv', 0);
                store.commit('setCurrentMusicArtist', '');
                store.commit('setCurrentMusicName', '');
                store.commit('setCurrentMusicCoverUrl', '');
                store.commit('setCurrentMusicUrl', '');
                store.commit('setDuration', 0);
                localStorage.removeItem('latPlayMusicIndex');
                localStorage.removeItem('playList');
            },
            formatTime(ms) {
                let min = Math.floor(Math.ceil(ms / 1000) / 60);
                let sec = Math.ceil(ms / 1000) % 60;
                if (min < 10)
                    min = '0' + min;
                if (sec < 10)
                    sec = '0' + sec;
                return min + ':' + sec;
            },
            deleteOne(index) {
                // //列表有一首歌，删除
                // if (index == 0&&this.playList.length==1) {
                //     this.$store.commit('clearInformation');
                //     document.getElementById('audioPlayer').src='';
                //     document.getElementById('audioPlayer').currentTime=0;
                //
                //     document.getElementById('audioPlayer').pause();
                //     return;
                // }
                let cindex = this.currentMusicIndex;
                this.$store.commit('removeMusicFromPlayList', index);
                if (index == cindex) {
                    if (this.playList.length!=0) {
                        let player = document.getElementById('audioPlayer');
                        player.muted = true;
                        musicApi.getMusicUrl({id: this.currentSongId})
                            .then(res => {
                                if (res.data.code == 200) {
                                    player.src = res.data.data[0].url;
                                    if (this.$store.state.isPlay) {
                                        player.play();
                                    } else {
                                        player.pause();
                                    }
                                }
                                player.muted = false;
                            });
                    }
                }
                else {

                }
            }
        },
        computed: {
            ...mapState({
                playList: (state) => state.playList,
                currentMusicCoverUrl: (state) => state.currentMusicCoverUrl,
                currentSongId: (state) => state.currentSongId,
                currentMusicIndex: (state) => state.currentMusicIndex,
                currentMusicUrl:(state)=>state.currentMusicUrl
            })
        },
        created() {
        },
        watch: {
            currentMusicIndex() {
                this.$refs.playList.scrollTop = this.currentMusicIndex * 28;
            }, show(newV, oldV) {
                this.$refs.playList.scrollTop = this.currentMusicIndex * 28;
            }
        },
        mounted() {
        }
    }
</script>

<style lang="scss">

    .playList_wrapper {
        a {
            color: #CCC;
        }
        a:hover {
            color: #fff;
        }
        position: absolute;
        bottom: 53px;
        width: 100%;
        height: 301px;
        .container {
            background-size: cover;
            border-radius: 10px 10px 0 0;
            height: 100%;
            padding: 0px;

            div.left {
                float: left;
                width: 60%;
                height: 100%;
                .left_top {
                    height: 40px;
                    width: 100%;
                    border-radius: 10px 0 0 0;
                    border-bottom: 1px solid #252525;
                    background: linear-gradient(to right, #0F0F0F, #1E1E1E, #0F0F0F);
                    background: -webkit-linear-gradient(to right, #0F0F0F, #1E1E1E, #0F0F0F); /* Safari 5.1 - 6.0 */
                    background: -o-linear-gradient(to right, #0F0F0F, #1E1E1E, #0F0F0F); /* Opera 11.1 - 12.0 */
                    background: -moz-linear-gradient(to right, #0F0F0F, #1E1E1E, #0F0F0F); /* Firefox 3.6 - 15 */
                    .left_top_title {
                        float: left;
                        padding-left: 25px;
                        color: #CCCCCC;
                        margin: 0px;
                        line-height: 40px;
                    }
                    .left_top_del {
                        line-height: 40px;
                        float: right;
                        padding-right: 10px;
                        span {
                            cursor: pointer;
                            color: #9B9B9B;
                            &:hover {
                                color: #fff;
                            }
                        }
                    }
                }
                .left_content {
                    overflow-y: scroll;
                    height: 261px;
                    &::-webkit-scrollbar { /*滚动条整体样式*/
                        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
                        height: 1px;
                    }
                    &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                        border-radius: 10px;
                        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                        background: #444648;
                        border: 1px solid #54595C;
                    }
                    &::-webkit-scrollbar-track { /*滚动条里面轨道*/
                        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                        background: #101212;
                    }
                    ul {
                        padding: 0px;
                        background-color: #131313;
                        min-height: 100%;
                        margin: 0;
                        filter: opacity(95%);
                        list-style: none;
                        li {
                            cursor: pointer;
                            height: 28px;
                            margin-left: 5px;
                            color: #CCCCCC;
                            .iconfont {
                                line-height: 28px;

                            }
                            p.name {
                                margin: 5px 0px 0px 10px;
                                font-size: 12px;
                                display: inline-block;
                            }
                            .artist {
                                -ms-text-overflow: ellipsis;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                width: 80px;
                                line-height: 28px;
                                font-size: 12px;
                                float: right;
                            }
                            .duration {
                                padding-left: 10px;
                                line-height: 28px;
                                font-size: 12px;
                                float: right;
                                margin: 0px;
                            }
                            .link {
                                display: inline-block;
                                text-decoration: none;
                                margin: 0px;
                                width: 20px;
                                font-size: 12px;
                                float: right;
                                margin-left: 20px;
                            }
                            div.li_tools {
                                display: none;
                                float: right;
                                height: 28px;
                                width: auto;
                                line-height: 28px;
                                margin-right: 10px;
                                span {
                                    color: #CCC;
                                    padding-left: 5px;
                                    &:hover {
                                        color: #fff;
                                    }
                                }
                            }
                        }
                        li:hover {
                            background-color: #0E0E0E;
                            p {
                                color: #fff;
                            }
                            .li_tools{
                                display:inline-block;
                            }
                        }
                    }
                }
            }
            div.right {
                float: left;
                width: 40%;
                height: 100%;
            }
        }
    }

    .space {
        padding-left: 14px;
        color: #CCCCCC;
    }

    .liActive {
        color: #fff;
        background-color: #0E0E0E;
        * {
            color: #fff;
        }
        a {
            color: #fff;
        }
    }
</style>